<template>
    <div id="login">
        <nut-row class="padding-top">
            <nut-col :span="24">
                <h2>登录</h2>
            </nut-col>
        </nut-row>
        <nut-row class="padding-top">
            <nut-col :span="6">
                <div class="text-st">账号:</div>
            </nut-col>
            <nut-col :span="16">
                <div>
                    <nut-textinput
                            maxlength="30"
                            v-model="form.name"
                    />
                </div>
            </nut-col>
        </nut-row>
        <nut-row class="padding-top">
            <nut-col :span="6">
                <div class="text-st">密码:</div>
            </nut-col>
            <nut-col :span="16">
                <div>
                    <nut-textinput
                            type="password"
                            maxlength="30"
                            v-model="form.password"
                    />
                </div>
            </nut-col>
        </nut-row>
        <nut-row class="padding-top">
            <nut-col :span="24">
                <nut-button
                        class="bt-color"
                        shape="circle"
                        block
                        v-on:click="login"
                >
                    登录
                </nut-button>
            </nut-col>
            <nut-col :span="24">
                <nut-col>
                    <a @click="forgetPassword">忘记密码</a> | <a @click="register">用户注册</a>
                </nut-col>
            </nut-col>
        </nut-row>
    </div>
</template>

<script>
    import { Login, GetUserInfo } from '@/api/auth'
    import { SetCookie } from '@/utils/jscookie'

    export default {
        name: "login",
        components: {},
        data() {
            return {
                form: {
                    name: "",
                    password: ""
                },
                show: false
            }
        },
        methods: {
            // 忘记密码
            forgetPassword() {

            },
            // 注册
            register() {
                this.$router.push('/auth/register')
            },
            // 登录
            login() {
                Login(this.form).then(res => {
                    if (res.code === 1) {
                        var token = res.data.token
                        // localStorage.setItem("_token", token)
                        SetCookie("_token", token, 3)
                        this.getUserInfo()
                        this.$toast.success(res.message, {
                            duration: 1500,
                            onClose: () => {
                                this.$router.push("/home/index")
                            }
                        })
                    }else {
                        this.$toast.fail(res.message, {
                            duration: 1000,
                        })
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            getUserInfo() {
                GetUserInfo().then(res => {
                    if (res.code === 1) {
                        this.$store.dispatch("userInfoStore", res.data)
                        SetCookie('_userinfo', JSON.stringify(res.data), 3)
                        // localStorage.setItem("_userinfo", JSON.stringify(res.data))
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped lang="css">
    .padding-top {
        margin-top: 15px;
    }

    .bt-color {
        background: rgb(65, 184, 131);
        color: #FFFFFF;
    }

    .text-st {
        text-align: center;
        line-height: 15px;
        vertical-align: middle;
        padding-top: 10px;
    }
</style>